<template>
	<div class="showData">
		<!-- 头部样式 -->
		<div class="titleBoxImage">
			<span>{{ this.name }}</span>
		</div>
		<div class="bodyBox">
			<div class="numShow" v-for="(item, index) in tableData" :key="index">
				<el-row type="flex" class="row-big">
					<el-col :span="12">
						<span>{{ item.name }}</span>
					</el-col>
					<el-col :span="12">
						<span><input type="text" :value="item.value" /></span>
						<span class="unitsShow">{{ item.units }}</span>
					</el-col>
				</el-row>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	created() {
		console.log('成功2');
		const propsData = this.propsData;
		// 数据校验
		if (propsData == null || propsData.tableData == null || propsData.name == null) {
			console.log('传输数据不能为null');
			return null;
		}

		const tableData = propsData.tableData;

		// 类型与长度校验
		if (!Array.isArray(tableData) || tableData.length <= 0) {
			console.error('数据类型必须为数组，且大于0');
			return null;
		}

		// 传递参数
		this.tableData = propsData.tableData;
		this.name = propsData.name;
	},
	data() {
		return {
			tableData: [
				{
					name: '电机速度',
					value: 20,
					numberType: 'int',
					units: 'rpm'
				},
				{
					name: '电机速度2',
					value: 202,
					numberType: 'int',
					units: 'rpm'
				},
				{
					name: '电机速度3',
					value: 203,
					numberType: 'int',
					units: 'rpm'
				},
				{
					name: '电机速度4',
					value: 201,
					numberType: 'int',
					units: 'rpm'
				},
				{
					name: '电机速度5',
					value: 203,
					numberType: 'int',
					units: 'rpm'
				}
			],
			name: '组件测试'
		};
	},
	props: {
		propsData: {
			type: Object,
			require: false
		}
	}
};
</script>

<style>
/* 整体样式 */
.showData {
	width: 300px;
	height: 392px;
	/* background-image: url('app://../img/image173.91e34a69.png'); */

	/* background-image: url(v-bind(image.image1)); */
	background-image: url('~@/static/image/image173.png');
	background-size: 100% 100%;
	color: #ffffff;
	font-family: '微软雅黑', sans-serif;
	/* background-size: cover; */
}
.titleBoxImage span {
	line-height: 60px;
	font-size: 30px;
	text-shadow: 2px 2px 1px #b5b5b5;
}
.titleBoxImage {
	width: 100%;
	height: 15%;
	background-image: url('~@/static/image/image107.png');
}
.numShow {
	font-size: 17px;
	width: 100%;
	height: auto;
	margin: 20px 0;
}
.numShow el-row {
	margin-left: 50px;
}
.numShow input {
	width: 18%;
	margin-left: 30px;
	background: transparent;
	color: white;
}
.numShow span {
}

.unitsShow {
	margin-left: 12px;
	color: #6cbffa;
}
</style>
